<template>
  <div v-if="type === 'default'" style="width:100%" class="word_container">
    <div class="left">{{ fileName || 'demo' }}.docx</div>
    <el-button v-if="showType !== 'noPreview'" @click="previewDocument" type="primary">预览</el-button>
    <el-button v-if="showType !== 'noDownload'" @click="generateDocument" type="primary">下载</el-button>
  </div>
  <div v-else style="width:100%">
    <el-button v-if="showType !== 'noPreview'" @click="previewDocument" type="text">预览</el-button>
    <el-button v-if="showType !== 'noDownload'" @click="generateDocument" type="text">下载</el-button>
  </div>
</template>
<script>
import { isString } from 'lodash'
import { asBlob } from 'html-docx-js-typescript'
// 要保存这个docx文件推荐引入file-saver哦，你可以用npm i -D file-saver来安装
import { saveAs } from 'file-saver'
export default {
  name: 'evaluationIndex',
  props: {
    // field
    value: '',
    mode: {
      default: "edit", // 编辑模式和 edit， 展示模式 view
    },
    buttonText: {
      type: String,
      default: '导出'
    },
    fileName: {
      type: String,
      default: 'demo'
    },
    type: {
      type: String,
      default: 'default'
    },
    //  noPreview,不预览 noDownload,不下载
    showType: {
      type: String,
      default: 'all'
    }
  },
  computed: {
    isDesigner(){
      return this.$attrs._source === 'designer'
    },
    mixEditable() {
      return !(this.$attrs.readonly || this.$attrs.disabled) && this.mode === "edit"
    },
  },
  data() {
    return {
      
    }
  },
  created(){
  },
  watch: {
   
  },
  methods: {
    generateDocument() {
      if (this.value) {
        asBlob(this.value).then(data => {
          console.log(data,'===data')
          saveAs(data, this.fileName + '.docx') // 保存为docx文件
        })
      } else {
        this.$message.warning('请配置符合条件的html字符串')
      }
    },
    previewDocument() {
      if (this.value) {
        let myWindow=window.open('');
        myWindow.document.write(this.value) //info为html的字符串
        myWindow.document.close()//必须关闭流，否则表单不生效
        myWindow.focus();
      } else {
        this.$message.warning('请配置符合条件的html字符串')
      }
    }
  }
}
</script>
<style lang="scss" scoped>
  a {
  text-decoration: none;
  color: #fff;
}
a:hover {
  color: #fff;
}
.el-button.el-button--primary:hover {
  a {
    text-decoration: none;
    color: #fff;
  }
}
.word_container {
  display: flex;
    .left {
      flex: 1;
    }
    .el-button {
      margin-left: 5px;
    }
}
</style>